<template>
  <view class="text-white">
    <cu-custom
      :isBack="true"
      :bgColor="showBg ? 'bg-coutom123': ''"
    >
      <block slot="backText">返回</block>
      <block slot="content">活动专区</block>
    </cu-custom>
    <view class="container">
      <image
        class="top_img seckill-image"
        mode="widthFix"
        src="../../static/images/11.png"
      ></image>
      <!-- 限时秒杀专区分类 -->
      <view class="class">
        <view class="title">
          <text>满减满折专区</text>
          <image mode="widthFix" src="../../static/images/22.png"></image>
        </view>
        <view class="contentM">
          <GoodsCardsM
            @onAdd="addCart"
            :goods="discountInfoGoodsAll"
          ></GoodsCardsM>
        </view>
      </view>
		  <view :class="'cu-load ' + (loadmore?'loading':'over')"></view>
      <goods-sku
        :goodsSpecData="goodsSpecData"
        :goodsSpu="goodsSpu"
        :goodsSku="goodsSpu.skus[0]"
        :modalSku="modalSku"
        :shopInfo="shopInfo"
        :shopId="shopId"
        :cartNum="cartNum"
        @numChange="cartNum = $event"
        @changeSpec="changeSpec"
        @operateCartEvent="operateCartEvent"
        @changeModalSku="modalSku = false"
      ></goods-sku>
    </view>
  </view>
</template>
<!-- <script module="fillter" lang="wxs" src="../../../utils/fillter.wxs"></script> -->
<script>
const app = getApp();
import api from "utils/api";
const util = require("@/utils/util.js");
import goodsSku from "@/components/goods-sku/index";
import goodsSkuM from "@/components/goods-sku-m/index";
import GoodsCards from "../../component/activity-goods-cards/index";
import GoodsCardsM from "../../component/activity-goods-cards-m/index";
export default {
  data() {
    return {
      theme: app.globalData.theme, //全局颜色变量
      statusbarobj: {},
      navTop: "",
      navHeight: "",
      navRight: "",
      discountInfoGoodsAll: [],
      //满减满折专区
      limitimediscount: {},
      //显示折扣专区
      goodsSpu: {},
      //商品详情
      goodsSpecData: [],
      //商品规格详情
      modalSku: false,
      //多活动区sku显示
      shopId:'',
      shopInfo:{},
      cartNum: 1,
      modalSkuM: false,
      //限时活动区sku显示
      modalSkuType: 1, // disType: '',
      shoppingCartCount: "",
      loadmore:true,
      showBg:false,
      page:{
        current: 1,
        size: 10
      }
    };
  },

  components: {
    goodsSku,
    goodsSkuM,
    GoodsCards,
    GoodsCardsM,
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    app.initPage().then((res) => {
      this.getDiscountInfo(); //获取满减满折专区所有商品

      // this.getlimitimediscountAll(); //获取显示折扣商品数据
    });
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.page.current =  this.page.current + 1
    this.getDiscountInfo()
  },
  onPageScroll(e) {
    if (e.scrollTop > 20) {
      this.showBg = true;
    } else {
      this.showBg = false;
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    back(){
      uni.navigateBack()
    },
    onChange(e) {
      // console.log(e)
      let { index } = e.currentTarget.dataset;
      e.detail.hour = parseInt(e.detail.days * 24) + parseInt(e.detail.hours);
      this.setData({
        ["limitimediscount.timeData"]: e.detail,
      });
    },
    //获取满减活动详情
    getDiscountInfo() {
      api.getDiscountInfoGoodsAll(this.page).then(({ data }) => {
        if (!data) return;
        if (this.loadmore) {
          let {records,total} = data
          if (!records) return;
          let discountInfoGoodsAll = records.filter((item) => item.shelf != 0);
          this.discountInfoGoodsAll = util.uniqueArrByAttr([...this.discountInfoGoodsAll,...discountInfoGoodsAll],'id') ;
          // this.discountInfoGoodsAll = [...this.discountInfoGoodsAll,...discountInfoGoodsAll];
          if(this.discountInfoGoodsAll.length >= total){
            this.loadmore = false
          }else{
            this.loadmore = true
          }
        } 
      });
    },
    //获取限时折扣活动详情
    getlimitimediscountAll() {
      // console.log(1);
      api.getlimitimediscountAll().then(({ data }) => {
        // console.log(data)
        // let limitimediscount = data.data.filter((item)=>{
        //   // console.log(item)
        //   return item.listGoodsSpu
        // })
        // limitimediscount.forEach((item) => {
        if (!data) return;

        if (data.validEndTime) {
          let now = new Date().getTime();
          let until = new Date(data.validEndTime.replace(/-/g, "/")).getTime();
          data.countdwon = until - now || 0;
        }

        data.timeData = {}; // })
        this.limitimediscount = data
      });
    },

    //组件触发加入购物车按钮
    addCart({ detail }) {
      let id = detail.id; 
      // let disDiscountId = detail.disDiscountId
      // let disDiscount = detail.disDiscount
      // let disType = detail.disType
      // let disCondition = detail.disCondition
      // let disReduce = detail.disReduce
      // this.setData({
      //   disDiscount: disDiscount,
      //   disType: disType,
      //   disCondition: disCondition,
      //   disReduce: disReduce,
      //   disDiscountId: disDiscountId
      // })
      // console.log(detail)
      this.goodsSpu = {}
      this.goodsSpecData = []
      this.shopId = ''
      this.shopInfo = {}
      this.cartNum = 1
      this.goodsGet(id);
      this.goodsSpecGet(id);
        this.modalSku = true
    },
    //限时活动区加入购物车
    // addCartM({ detail }) {
    //   let id = detail.id
    //   // console.log(detail)
    //   this.goodsGet(id)
    //   this.goodsSpecGet(id)
    //   this.setData({
    //     modalSkuM:true
    //   })
    // },
    //获取相片商品详情
    goodsGet(id) {
      api.goodsGet(id).then((res) => {
        // console.log('商品详情----------------',res.data)
        let goodsSpu = res.data;
        this.goodsSpu = goodsSpu
        this.shopId = goodsSpu.shopId;
        this.shopInfoGet(goodsSpu.shopId);
      });
    },

    //获取商品规格
    goodsSpecGet(spuId) {
      api
        .goodsSpecGet({
          spuId: spuId,
        })
        .then((res) => {
          let goodsSpecData = res.data;
          this.goodsSpecData = goodsSpecData
        });
    },

    shoppingCartCountFun() {
      api.shoppingCartCount().then((res) => {
        let shoppingCartCount = res.data;
        this.shoppingCartCount = shoppingCartCount
        //设置TabBar购物车数量
        app.globalData.shoppingCartCount = shoppingCartCount + "";
      });
    },
    operateCartEvent() {
      this.shoppingCartCountFun();
    },
    //查询店铺
    shopInfoGet(shopId) {
      api.shopInfoGet(shopId).then((res) => {
        this.shopInfo = res.data;
      });
    }
  },
};
</script>
<style>
page{
  
  background: #FEBC97;
}
.container {
  background-color: #ffede0;
}

.custom {
  position: fixed;
  z-index: 3;
}

.top_img {
  width: 100%;
  display: block;
}

.class .title {
  width: 502rpx;
  margin: 0 auto;
  height: 132rpx;
  position: relative;
  font-size: 48rpx;
  font-weight: bold;
  color: #fc7627;
  text-align: center;
}

.class .title image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.class .title text {
  top: 64rpx;
  position: relative;
  z-index: 2;
}

.class .content {
  width: 690rpx;
  background: linear-gradient(180deg, #fffdfd 0%, rgba(255, 251, 249, 0) 100%);
  border-radius: 10rpx;
  border: 4rpx solid;
  /* background-image: -webkitlinear-gradient(315deg, rgba(252, 118, 39, 0), rgba(252, 118, 39, 1), rgba(252, 118, 39, 0)) 4 4; */
  border-image: linear-gradient(
      315deg,
      rgba(252, 118, 39, 0),
      rgba(252, 118, 39, 1),
      rgba(252, 118, 39, 0)
    )
    4 4;
  margin: 0 auto;
  overflow: hidden;
  margin-top: 60rpx;
}

.class .content .countdwon {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 34rpx;
  text-align: center;
  color: #fc7627;
}

.class .content .countdwon .item {
  height: 36rpx;
  background: rgba(254, 126, 75, 0.2);
  text-align: center;
  line-height: 36rpx;
  font-size: 24rpx;
  display: inline-block;
  border-radius: 3rpx;
  color: #fc7627;
  padding: 0 8rpx;
}
.class .contentM .countdwon {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 34rpx;
  text-align: center;
  color: #fc7627;
}

.class .contentM .countdwon .item {
  height: 36rpx;
  background: rgba(254, 126, 75, 0.2);
  text-align: center;
  line-height: 36rpx;
  font-size: 24rpx;
  display: inline-block;
  border-radius: 3rpx;
  color: #fc7627;
  padding: 0 8rpx;
}
.class .bottom {
  margin-top: 40rpx;
  width: 750rpx;
  height: 100rpx;
  background: linear-gradient(180deg, #ffede0 0%, #fc7627 100%);
}

.class .content .group {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
}

/* 满减即送专区 */
.class .contentM {
  width: 690rpx;
  margin: 0 auto;
  margin-top: 60rpx;
}
.back{
  position: fixed;
  z-index: 9;
  top: 50rpx;
  left: 20rpx;
}
.seckill-image{
  margin-top: -160rpx;
}
.bg-coutom123{
  background: #FEA57B;
}
</style>